<template>
  <div class="teamset">
    <div class="teamset_main">
      <div class="card_top">
        <el-card :body-style="{ padding: '10' }" style="text-align: left;">
          <div class="taber">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="修改资料" name="1">
                <div style="width:400px">
                  <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="团队名称">
                      <div>{{ form.team_name }}</div>
                    </el-form-item>
                    <el-form-item label="QQ 号">
                      <el-input v-model="form.qq"></el-input>
                    </el-form-item>
                    <el-form-item label="团队Logo">
                      <!-- drag 拖拽上传 -->
                      <div class="goodurl">
                        <div v-if="team_img == ''">
                          <el-upload
                            class="avatar-uploader"
                            action="http://gyapi.letuilm.com/upload"
                            :on-success="handleAvatarSuccess"
                            :limit="1"
                            :multiple="false"
                            :show-file-list="false"
                            :before-upload="beforeAvatarUpload"
                          >
                            <i class="el-icon-plus avatar-uploader-icon"></i>
                          </el-upload>
                        </div>
                        <div v-else class="uploadimg">
                          <img :src="`http://` + team_img" class="avatar" />
                          <i class="el-icon-close" @click="closeimg()"></i>
                        </div>
                      </div>
                    </el-form-item>

                    <el-form-item label="擅长领域">
                      <el-input
                        type="textarea"
                        v-model="form.good_field"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="团队介绍">
                      <el-input
                        type="textarea"
                        v-model="form.team_desc"
                      ></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        style="width:100px"
                        type="primary"
                        @click="onSubmit"
                        >保存</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
              <el-tab-pane label="设置淘宝账号" name="2">
                <div style="width:500px">
                  <div class="dispalybtw">
                    <el-input
                      v-model="tbaccount"
                      placeholder="请输入淘宝账号"
                    ></el-input>
                    <el-button type="primary" @click="doAddTBAcc"
                      >新 增</el-button
                    >
                  </div>
                  <div style="color:red">
                    注:多个淘宝账号需要用逗号隔开,最多保存三个
                  </div>
                  <div>当前已绑定:{{ tbAcc }}</div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="3">
                <div style="width:400px">
                  <el-form
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="demo-ruleForm"
                  >
                    <el-form-item label="新密码" prop="pass">
                      <el-input
                        type="password"
                        v-model="ruleForm.pass"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="checkPass">
                      <el-input
                        type="password"
                        v-model="ruleForm.checkPass"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm('ruleForm')"
                        >提交</el-button
                      >
                      <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { doEditInfo } from "@/api/userinfo/userinfo";
import {
  doUpdatePass,
  getPersonalInfo,
  doAddTBAcc,
  getTBAccount
} from "@/api/user/user";
export default {
  name: "teamset",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      tbAcc: "", //返回淘宝账号
      tbaccount: "", //淘宝账号
      loading: false,
      activeName: "1",
      searchipt: "",
      searchradio: "1",
      form: {
        qq: "",
        good_field: "",
        team_img: "",
        team_desc: ""
      },
      team_img: "",
      ruleForm: {
        pass: "",
        checkPass: ""
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },

  computed: {},
  created() {
    // this.teamName = getUser().team_name;
    this.getPersonalInfo();
    this.getTBAccount();
  },
  mounted() {},
  methods: {
    //获取保存的淘宝账号
    getTBAccount() {
      getTBAccount()
        .then(res => {
          if (res.code == 200) {
            console.log("账号列表返回", res);
            this.tbAcc = res.data.tb_number;
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //添加淘宝账号
    doAddTBAcc() {
      doAddTBAcc({
        tb_number: this.tbaccount
      })
        .then(res => {
          if (res.code == 200) {
            console.log("新增返回", res);
            this.$message.success("新增成功!");
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    closeimg() {
      this.team_img = "";
    },
    getPersonalInfo() {
      getPersonalInfo()
        .then(res => {
          console.log("个人资料", res);
          this.form = res.data;
          this.team_img = this.form.team_img;
        })
        .catch(err => {
          console.log(err);
        });
    },
    doEditInfo() {
      doEditInfo({
        team_desc: this.form.team_desc,
        team_img: this.form.team_img,
        qq: this.form.qq,
        good_field: this.form.good_field
      })
        .then(res => {
          console.log(res);
          this.$message.success("修改成功!");
          // this.form = {};
          // this.team_img = "";
        })
        .catch(err => {
          console.log(err);
        });
    },
    //   修改密码
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          doUpdatePass({
            password: this.ruleForm.checkPass
          })
            .then(res => {
              console.log(res);
              alert("修改成功!您的新密码是" + this.ruleForm.checkPass);
              this.resetForm(formName);
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //   上传logo
    handleAvatarSuccess(res, file) {
      console.log("返回", res, file.raw);
      // console.log("返回", res.substring(0, 120));
      // const url = JSON.parse(res.substring(0, 120)).data.url;
      console.log("返回", res.data.url);
      this.form.team_img = res.data.url;
      this.team_img = res.data.url;
      console.log(this.form.team_img);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 资料提交
    onSubmit() {
      console.log("form", this.form);
      this.doEditInfo();
    },
    // 导航栏切换
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style lang="less" scoped>
.teamset {
  // width: 970px;
  box-sizing: border-box;
  .teamset_main {
    // width: 970px;
    // 上传logo
    .goodurl::v-deep {
      .el-upload {
        width: 120px;
        height: 120px;
        border: 1px solid #000;
        .el-icon-plus {
          line-height: 120px;
        }
      }
      .avatar {
        width: 120px;
      }
      .uploadimg {
        position: relative;
        display: inline-block;
        width: 120px;
        height: 120px;
        .el-icon-close {
          display: none;
          cursor: pointer;
          z-index: 200;
          position: absolute;
          top: 2px;
          right: 0px;
          width: 30px;
          height: 30px;
          line-height: 30px;
          background: #fff;
          font-weight: 600;
          font-size: 20px;
          font-style: normal;
          color: #5680fe;
          text-align: center;
          border-radius: 15px;
          transition: all linear 0.5s;
        }
        .el-icon-close:hover {
          background: #607bfe;
          color: #fff;
          transform: rotate(90deg);
          -webkit-transform: rotate(90deg);
        }
      }
      .uploadimg:hover {
        .el-icon-close {
          display: block;
        }
      }
    }
    .dispalybtw {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
